<template>
  <div class="haruyuki-scrollbar-60vh haruyuki-p-10">
    <div class="haruyuki-box-hazeBlue-shadow haruyuki-mb-20" v-for="(dataItem, index) in data" :key="index">
      <div class="aisle-template haruyuki-flex-space-between haruyuki-align-items-center haruyuki-ptb-10 haruyuki-bg-color-hazeblue">
        <div class="haruyuki-flex-center haruyuki-plr-20" @click="dataItem.isShow = !dataItem.isShow">
          <i :class="dataItem.isShow ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"></i>
          <span class="haruyuki-size-16 haruyuki-ml-20">通道名称：</span>
          <span class="haruyuki-size-16 policy-ml-3 policy-mr-3">{{ dataItem.aisleName }}</span>
          <div class="haruyuki-ml-6" v-if="isTemplate">
            <el-select
              size="small"
              value-key="templatePolNo"
              v-model="dataItem.templateData"
              @change="templateChildChange($event, index)"
              @clear="templateChildClear(index)"
              placeholder="可选择一键分配模板"
              clearable
            >
              <el-option
                v-for="item in dataItem.template"
                :key="item.templatePolNo"
                :label="item.policyName"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="haruyuki-mr-20" v-if="dataItem.isHasPos === 1">
          <span>刷卡费率：</span>
          <el-switch
            v-model="dataItem.isShowPos">
          </el-switch>
        </div>
      </div>
      <transition name="policy">
        <div v-show="dataItem.isShow">
          <table class="haruyuki-width-100">
            <colgroup>
              <col style="width: 200px; min-width: 200px;">
              <col>
            </colgroup>
            <tbody class="ant-table-tbody">
              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="1">
                <td class="haruyuki-bg-color-hazeblue haruyuki-border-bottom-white policy-text-center">扫码结算底价</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <el-input-number
                    class="haruyuki-width-50"
                    size="mini"
                    v-model="dataItem.aptRate"
                    :precision="4"
                    :step="0.0001"
                    :min="dataItem.aptRateMin"
                    :max="1"
                  ></el-input-number>
                  <span> %</span>
                </td>
                <td class="haruyuki-border-bottom-hazeblue haruyuki-border-right-hazeblue haruyuki-color-silverGray policy-text-center">（可设置最低结算底价为：{{dataItem.aptRateMin}}）</td>
              </tr>
              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="2">
                <td class="haruyuki-bg-color-hazeblue policy-text-center" :class="dataItem.isShowUnionPay == 1?'haruyuki-border-bottom-white':'haruyuki-border-bottom-hazeblue'">扫码结算比例</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <el-input-number
                    class="haruyuki-width-50"
                    size="mini"
                    v-model="dataItem.aptScale"
                    :precision="0"
                    :min="1"
                    :max="100"
                    @change="changeAptScale($event, index)"
                  ></el-input-number>
                  <span> %</span>
                </td>
                <td class="haruyuki-border-bottom-hazeblue haruyuki-border-right-hazeblue haruyuki-color-silverGray policy-text-center"></td>
              </tr>
              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="0">
                <td class="haruyuki-bg-color-hazeblue haruyuki-border-bottom-white policy-text-center">扫码垫资费率</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <el-input-number
                    class="haruyuki-width-50"
                    size="mini"
                    v-model="dataItem.codeAdvanceRate"
                    :precision="4"
                    :step="0.0001"
                    :min="dataItem.codeAdvanceRateMin"
                    :max="1"
                  ></el-input-number>
                  <span> %</span>
                </td>
                <td class="haruyuki-border-bottom-hazeblue haruyuki-border-right-hazeblue haruyuki-color-silverGray policy-text-center">（可设置最低垫资费率为：{{dataItem.codeAdvanceRateMin}}）</td>
              </tr>
              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="3" v-if="dataItem.isShowUnionPay == 1 && dataItem.serviceForm">
                <td class="haruyuki-bg-color-hazeblue haruyuki-border-bottom-white policy-text-center">服务商-云闪付（成本费率）</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <span>借记卡扫码成本费率(>1000)：{{dataItem.serviceForm.debitRate}}</span>
                  <span> %</span>
                </td>
                <td class="haruyuki-border-bottom-hazeblue haruyuki-border-right-hazeblue policy-text-center">
                  <span>贷记卡扫码成本费率(>1000)：{{dataItem.serviceForm.creditRate}}</span>
                  <span> %</span>
                </td>
              </tr>
              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="4" v-if="dataItem.isShowUnionPay == 1 && dataItem.serviceForm">
                <td class="haruyuki-bg-color-hazeblue haruyuki-border-bottom-white policy-text-center">服务商-云闪付（封顶金额）</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <span>借记卡扫码大额封顶金额：{{dataItem.serviceForm.debitGtMax}}</span>
                  <span> ¥</span>
                </td>
                <td class="haruyuki-border-bottom-hazeblue haruyuki-border-right-hazeblue policy-text-center">
                  <span>借记卡扫码小额封顶金额：{{dataItem.serviceForm.debitLtMax}}</span>
                  <span> ¥</span>
                </td>
              </tr>

              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="5" v-if="dataItem.isShowUnionPay == 1 && dataItem.merchantForm">
                <td class="haruyuki-bg-color-hazeblue haruyuki-border-bottom-white policy-text-center">商户-云闪付（签约费率）</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <span>借记卡扫码签约费率(>1000)：{{dataItem.merchantForm.debitRate}}</span>
                  <span> %</span>
                </td>
                <td class="haruyuki-border-bottom-hazeblue haruyuki-border-right-hazeblue policy-text-center">
                  <span>贷记卡扫码签约费率(>1000)：{{dataItem.merchantForm.creditRate}}</span>
                  <span> %</span>
                </td>
              </tr>
              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="6" v-if="dataItem.isShowUnionPay == 1 && dataItem.merchantForm">
                <td class="haruyuki-bg-color-hazeblue haruyuki-border-bottom-white policy-text-center">商户-云闪付（封顶金额）</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <span>借记卡扫码大额封顶金额：{{dataItem.merchantForm.debitGtMax}}</span>
                  <span> ¥</span>
                </td>
                <td class="haruyuki-border-bottom-hazeblue haruyuki-border-right-hazeblue policy-text-center">
                  <span>借记卡扫码小额封顶金额：{{dataItem.merchantForm.debitLtMax}}</span>
                  <span> ¥</span>
                </td>
              </tr>
              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="7" v-if="dataItem.isHasPos === 1 && dataItem.isShowPos">
                <td class="haruyuki-bg-color-hazeblue haruyuki-border-bottom-white policy-text-center">刷卡垫资费率</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <el-input-number
                    class="haruyuki-width-50"
                    size="mini"
                    v-model="dataItem.posTrad.codeAdvanceRate"
                    :precision="4"
                    :step="0.0001"
                    :min="dataItem.posTrad.codeAdvanceRateMin"
                    :max="1"
                  ></el-input-number>
                  <span> %</span>
                </td>
                <td class="haruyuki-border-bottom-hazeblue haruyuki-border-right-hazeblue haruyuki-color-silverGray policy-text-center">（可设置最低垫资费率为：{{dataItem.posTrad.codeAdvanceRateMin}}）</td>
              </tr>
              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="8" v-if="dataItem.isHasPos === 1 && dataItem.isShowPos">
                <td class="haruyuki-bg-color-hazeblue haruyuki-border-bottom-white policy-text-center">贷记卡刷卡结算底价</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <el-input-number
                    class="haruyuki-width-50"
                    size="mini"
                    v-model="dataItem.posTrad.creditRate"
                    :precision="4"
                    :step="0.0001"
                    :min="dataItem.posTrad.creditRateMin"
                    :max="1"
                  ></el-input-number>
                  <span> %</span>
                </td>
                <td class="haruyuki-border-bottom-hazeblue haruyuki-border-right-hazeblue haruyuki-color-silverGray policy-text-center">（可设置最低结算底价为：{{dataItem.posTrad.creditRateMin}}）</td>
              </tr>
              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="9" v-if="dataItem.isHasPos === 1 && dataItem.isShowPos">
                <td class="haruyuki-bg-color-hazeblue haruyuki-border-bottom-white policy-text-center">借记卡刷卡结算底价</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <el-input-number
                    class="haruyuki-width-50"
                    size="mini"
                    v-model="dataItem.posTrad.debtRate"
                    :precision="4"
                    :step="0.0001"
                    :min="dataItem.posTrad.debtRateMin"
                    :max="1"
                  ></el-input-number>
                  <span> %</span>
                </td>
                <td class="haruyuki-border-bottom-hazeblue haruyuki-border-right-hazeblue haruyuki-color-silverGray policy-text-center">（可设置最低结算底价为：{{dataItem.posTrad.debtRateMin}}）</td>
              </tr>
              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="10" v-if="dataItem.isHasPos === 1 && dataItem.isShowPos">
                <td class="haruyuki-bg-color-hazeblue haruyuki-border-bottom-white policy-text-center">借记卡刷卡封顶金额</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <el-input-number
                    class="haruyuki-width-50"
                    size="mini"
                    v-model="dataItem.posTrad.debtRateMax"
                    :precision="2"
                    :step="0.1"
                    :min="dataItem.posTrad.debtRateMaxMin"
                  ></el-input-number>
                  <span> ¥</span>
                </td>
                <td class="haruyuki-border-bottom-hazeblue haruyuki-border-right-hazeblue haruyuki-color-silverGray policy-text-center">（可设置最低封顶金额为：{{dataItem.posTrad.debtRateMaxMin}}）</td>
              </tr>
              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="11" v-if="dataItem.isHasPos === 1 && dataItem.isShowPos">
                <td class="haruyuki-bg-color-hazeblue haruyuki-border-bottom-hazeblue policy-text-center">挥卡小额结算底价</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <el-input-number
                    class="haruyuki-width-50"
                    size="mini"
                    v-model="dataItem.posTrad.waveRate"
                    :precision="4"
                    :step="0.0001"
                    :min="dataItem.posTrad.waveRateMin"
                    :max="1"
                  ></el-input-number>
                  <span> %</span>
                </td>
                <td class="haruyuki-border-bottom-hazeblue haruyuki-border-right-hazeblue haruyuki-color-silverGray policy-text-center">（可设置最低结算底价为：{{dataItem.posTrad.waveRateMin}}）</td>
              </tr>
              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="11" v-if="dataItem.isHasPos === 1 && dataItem.isShowVip && dataItem.isShowPos">
                <td class="haruyuki-bg-color-hazeblue haruyuki-border-bottom-hazeblue policy-text-center">银联费率</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <el-input-number
                    class="haruyuki-width-50"
                    size="mini"
                    v-model="dataItem.posTrad.unionpayRate"
                    :precision="4"
                    :step="0.0001"
                    :min="dataItem.posTrad.unionpayRateMin"
                    :max="1"
                  ></el-input-number>
                  <span> %</span>
                </td>
                <td class="haruyuki-border-bottom-hazeblue haruyuki-border-right-hazeblue haruyuki-color-silverGray policy-text-center">（可设置最低结算底价为：{{dataItem.posTrad.waveRateMin}}）</td>
              </tr>
              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="11" v-if="dataItem.isHasPos === 1 && dataItem.isShowVip && dataItem.isShowPos">
                <td class="haruyuki-bg-color-hazeblue haruyuki-border-bottom-hazeblue policy-text-center">尊享费率</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <el-input-number
                    class="haruyuki-width-50"
                    size="mini"
                    v-model="dataItem.posTrad.vipRate"
                    :precision="4"
                    :step="0.0001"
                    :min="dataItem.posTrad.vipRateMin"
                    :max="1"
                  ></el-input-number>
                  <span> %</span>
                </td>
                <td class="haruyuki-border-bottom-hazeblue haruyuki-border-right-hazeblue haruyuki-color-silverGray policy-text-center">（可设置最低结算底价为：{{dataItem.posTrad.waveRateMin}}）</td>
              </tr>
              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="5" v-if="dataItem.isHasPos === 1 && dataItem.isShowPos">
                <td class="haruyuki-bg-color-hazeblue haruyuki-border-bottom-white policy-text-center">商户-刷卡（结算底价）</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <span>刷卡挥卡结算底价：{{dataItem.merchantForm.posWaveRate}}</span>
                  <span> %</span>
                </td>
                <td class="haruyuki-border-bottom-hazeblue haruyuki-border-right-hazeblue policy-text-center">
                  <span>贷记卡刷卡结算底价：{{dataItem.merchantForm.posCreditRate}}</span>
                  <span> %</span>
                </td>
              </tr>
              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="6" v-if="dataItem.isHasPos === 1 && dataItem.isShowPos">
                <td class="haruyuki-bg-color-hazeblue haruyuki-border-bottom-white policy-text-center">商户-刷卡（借记卡）</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <span>借记卡刷卡结算底价：{{dataItem.merchantForm.posDebitRate}}</span>
                  <span> %</span>
                </td>
                <td class="haruyuki-border-bottom-hazeblue haruyuki-border-right-hazeblue policy-text-center">
                  <span>借记卡刷卡封顶金额：{{dataItem.merchantForm.posDebitRateMax}}</span>
                  <span> ¥</span>
                </td>
              </tr>
              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="7" v-if="dataItem.isHasPos === 1 && dataItem.isShowPos">
                <td class="haruyuki-bg-color-hazeblue haruyuki-border-bottom-white policy-text-center">商户-刷卡（垫资费率）</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <span>刷卡垫资费率：{{dataItem.merchantForm.posCodeAdvanceRate}}</span>
                  <span> %</span>
                </td>
              </tr>
              <tr class="haruyuki-line-height-special haruyuki-plr-40" data-row-key="8" v-if="dataItem.isHasPos === 1 && dataItem.isShowVip && dataItem.isShowPos">
                <td class="haruyuki-bg-color-hazeblue haruyuki-border-bottom-white policy-text-center">商户-银联尊享（费率）</td>
                <td class="haruyuki-plr-20 haruyuki-border-bottom-hazeblue policy-text-center">
                  <span>银联费率：{{dataItem.merchantForm.unionpayRate}}</span>
                  <span> %</span>
                </td>
                <td class="haruyuki-border-bottom-hazeblue haruyuki-border-right-hazeblue policy-text-center">
                  <span>尊享费率：{{dataItem.merchantForm.vipRate}}</span>
                  <span> ¥</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import { getPolicyDetail } from "@/api/rb-service/serviceinfo/service_info";
import { getList, getDetail } from "@/api/rb-service/serviceTemplate/service_template";
import { getDetail as getEmpDetail } from "@/api/rb-service/emppolicy/emp_policy";

export default {
  props: {
    oem: Object,
    aisleCode: {
      type: [Number, String],
      default: "",
    },
    identityType: {
      type: String,
      required: true,
    },
    isTemplate: {
      type: Boolean,
      default: true,
    },
    aisleCodeList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      data: [], //通道政策 树形数据
      aptTemplate: {
        aptRate: 0,
        aptScale: 0,
      },
      stateIndex: 1,
    };
  },
  watch: {},
  created() {
    this.getPolicy(this.identityType);
  },
  methods: {
    /* 政策详情 */
    async getPolicy(type) {
      if (type === 'service') {
        //查询服务商可设置最低费率
        let params = {
          userNo: this.oem.userNo,
          userType: this.oem.userType,
          aisleCodeList: this.aisleCodeList || [],
          // aisleCode: this.aisleCode ? this.aisleCode : "",
        }
        await getPolicyDetail(params).then(async (res) => {
          if (res.data.code == "200") {
            let datas = res.data.data.aisleTradList;
            for (let i = 0; i < datas.length; i++) {
              this.$set(datas[i], "isShow", true);
              this.$set(datas[i], "templatePolNo", ""); //接口传值模板编号
              this.$set(datas[i], "templateData", "");  //已选模板数据
              this.$set(datas[i], "isShowPos", false);
              // this.$set(datas[i], "codeAdvanceRateMin", Number(resHig.data.data.codeAdvanceRate));  //配置最低可设置垫资费率
              // this.$set(datas[i], "aptRateMin", Number(resHig.data.data.aptRate));  //配置最低可设置成本费率
              await this.templatePolicy(datas[i]);
            }
            this.$nextTick(() => {
              this.data = JSON.parse(JSON.stringify(datas));
            });
          } else {
            this.$message({
              type: "error",
              message: res.data.message,
            });
          }
        });
      } else if (type === 'employee') {
        await getEmpDetail(this.oem.code).then((res) => {
          if (res.data.code == "200") {
            let datas = res.data.data.aisleList;
            for (let i = 0; i < datas.length; i++) {
              this.$set(datas[i], "isShow", true);
            }
            this.$nextTick(() => {
              this.data = JSON.parse(JSON.stringify(datas));
            });
          } else {
            this.$message({
              type: "error",
              message: res.data.message,
            });
          }
        });
      }
    },
    /* 匹配政策通道编号 单模板查询 赋值 */
    async templatePolicy(data) {
      await getList("-1", "-1", { aisleCode: data.aisleCode }).then(
        (tempRes) => {
          this.$set(data, "template", tempRes.data.data.records);
          return data;
        }
      );
    },
    /* 通道政策模板 根据单通道选择模板单渲染 */
    async templateChildChange(e, index) {
      if (e.id) {
        let temp = this.data[index].template.find((item) => item.id === e.id);
        await getDetail(temp.id, this.data[index].aisleCode).then((res) => {
          let templateData = res.data.data;
          this.data[index].aptRate = templateData.aisleRateList[0].aptRate;
          this.data[index].aptScale = templateData.aisleRateList[0].aptScale;
          this.data[index].codeAdvanceRate = templateData.aisleRateList[0].codeAdvanceRate;
          this.data[index].templatePolNo = templateData.templatePolNo;
        });
      }
    },
    /* 通道政策模板 根据单通道选择模板单清空 */
    templateChildClear(index) {
      this.data[index].aptRate = 0;
      this.data[index].aptScale = 0;
      this.data[index].codeAdvanceRate = 0;
      this.data[index].templateData = {},
      this.data[index].templatePolNo = "";
    },
    /* 结算比例change 计算最低可设置成本费率 */
    changeAptScale(e, index) {
      // this.data[index].aptRate = e * this.data[index].aptRateMin;
      const decimals = e / 100;
      if (decimals * this.data[index].aptRate < this.data[index].aptRateMin) {
        this.$message({
          type: "error",
          message: "不能小于最低可设置成本费率",
        });
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.aisle-template {
  width: 100%;
  font-weight: bold;
}

.policy-mr-3 {
  margin-right: 3px;
}

.policy-ml-3 {
  margin-left: 3px;
}

.policy-enter-active, .policy-leave-active {
	transition: all .1s ease-in-out 0s;
}
.policy-enter, .policy-leave-to {
	opacity: 0
}

.policy-text-center {
  text-align: center;
}
</style>